Declare the site icons in various sizes
These are auto-generated from the SVG icon by running `bin/rake icons`.
Akinori MUSHA
20 geänderte Dateien mit 161 neuen Zeilen und 0 gelöschten Zeilen
+ 1
- 0
Gemfile
@@ -76,6 +76,7 @@ gem 'jsonpath', '~> 0.5.6' |
||
| 76 | 76 |
gem 'kaminari', '~> 0.16.1' |
| 77 | 77 |
gem 'kramdown', '~> 1.3.3' |
| 78 | 78 |
gem 'liquid', '~> 2.6.1' |
| 79 |
+gem 'mini_magick' |
|
| 79 | 80 |
gem 'mysql2', '~> 0.3.16' |
| 80 | 81 |
gem 'multi_xml' |
| 81 | 82 |
gem 'nokogiri', '~> 1.6.4' |
+ 2
- 0
Gemfile.lock
@@ -252,6 +252,7 @@ GEM |
||
| 252 | 252 |
thread_safe (~> 0.3, >= 0.3.1) |
| 253 | 253 |
method_source (0.8.2) |
| 254 | 254 |
mime-types (2.5) |
| 255 |
+ mini_magick (4.2.3) |
|
| 255 | 256 |
mini_portile (0.6.2) |
| 256 | 257 |
minitest (5.5.1) |
| 257 | 258 |
mqtt (0.3.1) |
@@ -533,6 +534,7 @@ DEPENDENCIES |
||
| 533 | 534 |
kaminari (~> 0.16.1) |
| 534 | 535 |
kramdown (~> 1.3.3) |
| 535 | 536 |
liquid (~> 2.6.1) |
| 537 |
+ mini_magick |
|
| 536 | 538 |
mqtt |
| 537 | 539 |
multi_xml |
| 538 | 540 |
mysql2 (~> 0.3.16) |
+ 13
- 0
app/views/layouts/application.html.erb
@@ -9,6 +9,19 @@ |
||
| 9 | 9 |
<%= stylesheet_link_tag "application", :media => "all" %> |
| 10 | 10 |
<%= javascript_include_tag "application" %> |
| 11 | 11 |
<%= csrf_meta_tags %> |
| 12 |
+ <link rel="apple-touch-icon" sizes="57x57" href="/apple-touch-icon-57x57.png"> |
|
| 13 |
+ <link rel="apple-touch-icon" sizes="60x60" href="/apple-touch-icon-60x60.png"> |
|
| 14 |
+ <link rel="apple-touch-icon" sizes="72x72" href="/apple-touch-icon-72x72.png"> |
|
| 15 |
+ <link rel="apple-touch-icon" sizes="76x76" href="/apple-touch-icon-76x76.png"> |
|
| 16 |
+ <link rel="apple-touch-icon" sizes="114x114" href="/apple-touch-icon-114x114.png"> |
|
| 17 |
+ <link rel="apple-touch-icon" sizes="120x120" href="/apple-touch-icon-120x120.png"> |
|
| 18 |
+ <link rel="apple-touch-icon" sizes="144x144" href="/apple-touch-icon-144x144.png"> |
|
| 19 |
+ <link rel="apple-touch-icon" sizes="152x152" href="/apple-touch-icon-152x152.png"> |
|
| 20 |
+ <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon-180x180.png"> |
|
| 21 |
+ <link rel="icon" type="image/vnd.microsoft.icon" href="/favicon.ico" sizes="16x16"> |
|
| 22 |
+ <link rel="icon" type="image/png" href="/android-chrome-48x48.png" sizes="48x48"> |
|
| 23 |
+ <link rel="icon" type="image/png" href="/android-chrome-192x192.png" sizes="192x192"> |
|
| 24 |
+ <link rel="manifest" href="/manifest.json"> |
|
| 12 | 25 |
<%= yield(:ace_editor_script) %> |
| 13 | 26 |
<%= yield(:head) %> |
| 14 | 27 |
</head> |
+ 104
- 0
lib/tasks/icon.rake
@@ -0,0 +1,104 @@ |
||
| 1 |
+ICONS_DIR = 'public' |
|
| 2 |
+ORIGINAL_IMAGE = 'media/huginn-icon-square.svg' |
|
| 3 |
+ |
|
| 4 |
+desc "Generate site icons from #{ORIGINAL_IMAGE}"
|
|
| 5 |
+task :icons => 'icon:all' |
|
| 6 |
+ |
|
| 7 |
+namespace :icon do |
|
| 8 |
+ # iOS |
|
| 9 |
+ task :all => :ios |
|
| 10 |
+ |
|
| 11 |
+ [ |
|
| 12 |
+ 57, 114, |
|
| 13 |
+ 60, 120, 180, |
|
| 14 |
+ 72, 144, |
|
| 15 |
+ 76, 152, |
|
| 16 |
+ ].each do |width| |
|
| 17 |
+ sizes = '%1$dx%1$d' % width |
|
| 18 |
+ filename = "apple-touch-icon-#{sizes}.png"
|
|
| 19 |
+ icon = File.join(ICONS_DIR, filename) |
|
| 20 |
+ |
|
| 21 |
+ file icon => ORIGINAL_IMAGE do |t| |
|
| 22 |
+ puts "Generating #{t.name}"
|
|
| 23 |
+ convert_image t.source, t.name, width: width |
|
| 24 |
+ end |
|
| 25 |
+ |
|
| 26 |
+ task :ios => icon |
|
| 27 |
+ end |
|
| 28 |
+ |
|
| 29 |
+ # Android |
|
| 30 |
+ task :all => :android |
|
| 31 |
+ |
|
| 32 |
+ android_icons = [ |
|
| 33 |
+ 36, 72, 144, |
|
| 34 |
+ 48, 96, 192, |
|
| 35 |
+ ].map do |width| |
|
| 36 |
+ sizes = '%1$dx%1$d' % width |
|
| 37 |
+ filename = "android-chrome-#{sizes}.png" % width
|
|
| 38 |
+ icon = File.join(ICONS_DIR, filename) |
|
| 39 |
+ |
|
| 40 |
+ file icon => ORIGINAL_IMAGE do |t| |
|
| 41 |
+ puts "Generating #{t.name}"
|
|
| 42 |
+ convert_image t.source, t.name, width: width, round: true |
|
| 43 |
+ end |
|
| 44 |
+ |
|
| 45 |
+ task :android => icon |
|
| 46 |
+ |
|
| 47 |
+ {
|
|
| 48 |
+ src: "/#{filename}",
|
|
| 49 |
+ sizes: sizes, |
|
| 50 |
+ type: 'image/png', |
|
| 51 |
+ density: (width / 48.0).to_s, |
|
| 52 |
+ } |
|
| 53 |
+ end |
|
| 54 |
+ |
|
| 55 |
+ manifest = File.join(ICONS_DIR, 'manifest.json') |
|
| 56 |
+ |
|
| 57 |
+ file manifest => __FILE__ do |t| |
|
| 58 |
+ puts "Generating #{t.name}"
|
|
| 59 |
+ require 'json' |
|
| 60 |
+ json = {
|
|
| 61 |
+ name: 'Huginn', |
|
| 62 |
+ icons: android_icons |
|
| 63 |
+ } |
|
| 64 |
+ File.write(t.name, JSON.pretty_generate(json)) |
|
| 65 |
+ end |
|
| 66 |
+ |
|
| 67 |
+ task :android => manifest |
|
| 68 |
+end |
|
| 69 |
+ |
|
| 70 |
+require 'mini_magick' |
|
| 71 |
+ |
|
| 72 |
+def convert_image(source, target, width: nil, round: false) |
|
| 73 |
+ ext = target[/(?<=\.)[^.]+\z/] || 'png' |
|
| 74 |
+ original = MiniMagick::Image.open(source) |
|
| 75 |
+ |
|
| 76 |
+ result = original |
|
| 77 |
+ result.format ext |
|
| 78 |
+ |
|
| 79 |
+ if width |
|
| 80 |
+ result.thumbnail '%1$dx%1$d>' % width |
|
| 81 |
+ else |
|
| 82 |
+ width = result[:width] |
|
| 83 |
+ end |
|
| 84 |
+ |
|
| 85 |
+ if round |
|
| 86 |
+ radius = (Rational(80, 512) * width).round |
|
| 87 |
+ |
|
| 88 |
+ mask = MiniMagick::Image.create(ext) { |tmp| result.write(tmp) }
|
|
| 89 |
+ |
|
| 90 |
+ mask.mogrify do |image| |
|
| 91 |
+ image.alpha 'transparent' |
|
| 92 |
+ image.background 'none' |
|
| 93 |
+ image.fill 'white' |
|
| 94 |
+ image.draw 'roundrectangle 0,0,%1$d,%1$d,%2$d,%2$d' % [width, radius] |
|
| 95 |
+ end |
|
| 96 |
+ |
|
| 97 |
+ result = result.composite(mask) do |image| |
|
| 98 |
+ image.alpha 'set' |
|
| 99 |
+ image.compose 'DstIn' |
|
| 100 |
+ end |
|
| 101 |
+ end |
|
| 102 |
+ |
|
| 103 |
+ result.write(target) |
|
| 104 |
+end |
BIN
public/android-chrome-144x144.png
BIN
public/android-chrome-192x192.png
BIN
public/android-chrome-36x36.png
BIN
public/android-chrome-48x48.png
BIN
public/android-chrome-72x72.png
BIN
public/android-chrome-96x96.png
BIN
public/apple-touch-icon-114x114.png
BIN
public/apple-touch-icon-120x120.png
BIN
public/apple-touch-icon-144x144.png
BIN
public/apple-touch-icon-152x152.png
BIN
public/apple-touch-icon-180x180.png
BIN
public/apple-touch-icon-57x57.png
BIN
public/apple-touch-icon-60x60.png
BIN
public/apple-touch-icon-72x72.png
BIN
public/apple-touch-icon-76x76.png
+ 41
- 0
public/manifest.json
@@ -0,0 +1,41 @@ |
||
| 1 |
+{
|
|
| 2 |
+ "name": "Huginn", |
|
| 3 |
+ "icons": [ |
|
| 4 |
+ {
|
|
| 5 |
+ "src": "/android-chrome-36x36.png", |
|
| 6 |
+ "sizes": "36x36", |
|
| 7 |
+ "type": "image/png", |
|
| 8 |
+ "density": "0.75" |
|
| 9 |
+ }, |
|
| 10 |
+ {
|
|
| 11 |
+ "src": "/android-chrome-48x48.png", |
|
| 12 |
+ "sizes": "48x48", |
|
| 13 |
+ "type": "image/png", |
|
| 14 |
+ "density": "1.0" |
|
| 15 |
+ }, |
|
| 16 |
+ {
|
|
| 17 |
+ "src": "/android-chrome-72x72.png", |
|
| 18 |
+ "sizes": "72x72", |
|
| 19 |
+ "type": "image/png", |
|
| 20 |
+ "density": "1.5" |
|
| 21 |
+ }, |
|
| 22 |
+ {
|
|
| 23 |
+ "src": "/android-chrome-96x96.png", |
|
| 24 |
+ "sizes": "96x96", |
|
| 25 |
+ "type": "image/png", |
|
| 26 |
+ "density": "2.0" |
|
| 27 |
+ }, |
|
| 28 |
+ {
|
|
| 29 |
+ "src": "/android-chrome-144x144.png", |
|
| 30 |
+ "sizes": "144x144", |
|
| 31 |
+ "type": "image/png", |
|
| 32 |
+ "density": "3.0" |
|
| 33 |
+ }, |
|
| 34 |
+ {
|
|
| 35 |
+ "src": "/android-chrome-192x192.png", |
|
| 36 |
+ "sizes": "192x192", |
|
| 37 |
+ "type": "image/png", |
|
| 38 |
+ "density": "4.0" |
|
| 39 |
+ } |
|
| 40 |
+ ] |
|
| 41 |
+} |